<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prompt 优化</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-plus/dist/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
    <script src="https://cdn.jsdelivr.net/npm/element-plus"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <style>
        .container {
            max-width: 1600px;
            margin: 0 auto;
            padding: 60px 40px;
            background-color: #f5f7fa;
            min-height: 100vh;
            box-sizing: border-box;
        }

        .header {
            text-align: center;
            margin-bottom: 60px;
            color: #303133;
        }

        .header h1 {
            font-size: 2.5em;
            margin-bottom: 16px;
            font-weight: 600;
        }

        .header p {
            font-size: 1.2em;
            color: #606266;
        }

        .prompt-form {
            background: white;
            padding: 48px;
            border-radius: 12px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }

        .button-container {
            display: flex;
            justify-content: center;
            margin: 24px 0;
            gap: 16px;
        }

        .el-button--primary {
            padding: 12px 24px;
            font-size: 16px;
        }

        .el-input__inner,
        .el-textarea__inner {
            background-color: #f8f9fb;
        }

        .el-form-item__label {
            font-size: 16px;
            font-weight: 500;
            color: #303133;
            padding-bottom: 8px;
        }

        .el-form-item {
            margin-bottom: 24px;
        }

        .el-collapse {
            border: none;
            margin-top: 20px;
        }

        .el-collapse-item__header {
            font-size: 14px;
            color: #606266;
        }

        .error-alert {
            margin-bottom: 20px;
        }

        .api-key-error {
            margin-top: 16px;
            padding: 12px;
            border-radius: 4px;
            background-color: #fef0f0;
            color: #f56c6c;
            font-size: 14px;
            line-height: 1.5;
        }

        .api-key-error .el-button {
            margin-left: 8px;
            margin-top: 8px;
        }

        .error-alert .el-alert__title {
            font-size: 14px;
            line-height: 1.5;
            white-space: pre-line;
        }
    </style>
</head>
<body>
<div id="app" class="container">
    <div class="header">
        <h1>欢迎使用 Prompt 优化</h1>
        <p>将简短的任务描述优化成结构完整的 Prompt</p>
    </div>
    <el-form class="prompt-form" @submit.prevent="generatePrompt" :model="generateForm" :rules="generateRules">
        <!-- 错误提示 -->
        <el-alert
                v-if="error"
                :title="error"
                type="error"
                class="error-alert"
                show-icon
                :closable="true"
                @close="clearError"
                :description="errorDescription"
        ></el-alert>
        <!-- 原始Prompt和优化后的Prompt -->
        <el-row :gutter="20">
            <el-col :span="10">
                <el-form-item label="原始Prompt" label-position="top" prop="taskDescription">
                    <el-input
                            v-model="generateForm.taskDescription"
                            type="textarea"
                            :rows="8"
                            placeholder="请输入原始Prompt"
                            clearable
                    ></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="10">
                <el-form-item label="优化后的Prompt" label-position="top">
                    <el-input
                            v-model="generatedPrompt"
                            type="textarea"
                            :rows="8"
                            readonly
                    ></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <!-- 操作按钮 -->
        <div class="button-container">
            <el-button @click="clearForm">清空内容</el-button>
            <el-button type="primary" @click="generatePrompt">生成Prompt</el-button>
        </div>
        <!-- 上传设置 -->
        <el-collapse v-model="activeCollapse">
            <el-collapse-item title="上传设置" name="upload">
                <el-form :model="uploadForm" :rules="uploadRules">
                    <el-form-item label="文件" prop="file">
                        <el-upload
                                class="upload-demo"
                                action="http://localhost:8090/api/file/upload"
                                :on-success="handleUploadSuccess"
                                :on-error="handleUploadError"
                                :auto-upload="true"
                                :file-list="fileList"
                                :limit="1"
                                accept=".xlsx, .txt"
                        >
                            <el-button type="primary">点击上传</el-button>
                            <div slot="tip" class="el-upload__tip">只能上传Excel或txt文件，且不超过500kb</div>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="类型" prop="type">
                        <el-select v-model="uploadForm.type" placeholder="请选择类型">
                            <el-option label="文本提取" value="text_summary"></el-option>
                            <el-option label="单人文本LORA" value="text_lora_one"></el-option>
                            <el-option label="双人文本LORA" value="text_lora_two"></el-option>
                            <el-option label="文生图" value="text_to_image"></el-option>
                            <el-option label="图生视频" value="image_to_video"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </el-collapse-item>
        </el-collapse>
    </el-form>
</div>
<script>
    const {createApp, ref, reactive} = Vue
    createApp({
        setup() {
            // 生成Prompt表单
            const generateForm = reactive({
                taskDescription: ''
            })
            // 上传设置表单
            const uploadForm = reactive({
                file: null,
                type: 'text_to_image'
            })
            // 通用状态
            const generatedPrompt = ref('')
            const error = ref('')
            const errorDescription = ref('')
            const activeCollapse = ref([])
            const fileList = ref([])

            // 表单验证规则
            const generateRules = {
                taskDescription: [{
                    required: true,
                    message: '请输入原始Prompt内容',
                    trigger: 'blur'
                }]
            }
            const uploadRules = {
                file: [{
                    required: true,
                    message: '请上传Excel文件',
                    trigger: 'change'
                }],
                type: [{
                    required: true,
                    message: '请选择类型',
                    trigger: 'change'
                }]
            }

            // 文件上传成功
            const handleUploadSuccess = (response, file) => {
                if (response && response.fileId) {
                    uploadForm.file = response.fileId
                    fileList.value = [file]
                    ElMessage.success('文件上传成功')
                }
            }

            // 文件上传失败
            const handleUploadError = (error, file) => {
                ElMessage.error('文件上传失败，请重试')
                console.error('上传错误:', error)
            }

            // 生成Prompt
            const generatePrompt = async () => {
                try {
                    clearError()
                    // 验证生成表单
                    const generateFormEl = document.querySelector('.prompt-form')
                    const generateValid = await generateFormEl.__vueParentComponent.exposed.validate()
                    if (!generateValid) return

                    // 验证上传表单
                    const uploadFormEl = document.querySelector('.upload-demo').__vueParentComponent
                    const uploadValid = await uploadFormEl.parent.validate()
                    if (!uploadValid) return

                    // 构造请求数据
                    const url = '/api/prompt/optimize'
                    const requestData = {
                        taskDescription: generateForm.taskDescription,
                        fileType: uploadForm.type,
                        fileId: uploadForm.file
                    }

                    const response = await axios.post(url, requestData)
                    if (response.data && response.data.prompt) {
                        generatedPrompt.value = response.data.prompt
                        ElMessage.success('生成成功')
                    } else {
                        throw new Error('Response does not contain prompt field')
                    }
                } catch (error) {
                    console.error('Error details:', error)
                    error.value = '生成失败，请检查参数或重试'
                    errorDescription.value = error.message
                }
            }

            // 清空表单
            const clearForm = () => {
                generateForm.taskDescription = ''
                uploadForm.file = null
                uploadForm.type = 'text_to_image'
                generatedPrompt.value = ''
                clearError()
            }

            // 清除错误
            const clearError = () => {
                error.value = ''
                errorDescription.value = ''
            }

            return {
                generateForm,
                uploadForm,
                generateRules,
                uploadRules,
                generatedPrompt,
                error,
                errorDescription,
                activeCollapse,
                fileList,
                generatePrompt,
                clearForm,
                clearError,
                handleUploadSuccess,
                handleUploadError
            }
        }
    }).use(ElementPlus).mount('#app')
</script>
</body>
</html>